<html>
<head>
<script type="text/javascript">
Vv = function ( element )
{
	this.element = element;
}
Vv.prototype.kikou = function ()
{
	alert ( this.element.innerHTML );
}
function test()
{
	var el = document.getElementById ( "coucou" );
	alert ( el.innerHTML );
	var v = new Vv ( el );
	v.kikou ();
}

function getFloat ( v )
{
	var j = parseFloat ( v );
	if ( isNaN ( j ) ) j = 0;
	return j;
}
function snapToBounds ( el )
{
	var t = getFloat(el.style.top);
	if ( t < 0 )
		el.style.top = 0;
	
	var h = getFloat(el.style.height);
	var v = t + h;
	
	var ph = getFloat(el.parentNode.style.height);
	var z = ph - h;

	if ( v > ph )
		el.style.top = z + 'px';
}
function goDown ()
{
	var el = document.getElementById ( 'bb' );
	var v = getFloat ( el.style.top );
	v += 10;
	el.style.top = v + 'px';
	snapToBounds ( el );
}
function goUp ()
{
	var el = document.getElementById ( 'bb' );
	var v = getFloat ( el.style.top );
	v -= 10;
	el.style.top = v + 'px';
	snapToBounds ( el );
}

function moveMe ()
{
	//alert ( "io" );
	var el = document.getElementById ( 'bb' );
	var offsetY = 20;
	//alert ( el );
	//var style = document.defaultView.getComputedStyle(el, null);
	var style = document.defaultView.getComputedStyle(el);
	//alert ( style );
	//el.style.webkitTransition = '-webkit-transform: ' + time + 'ms cubic-bezier(0.33, 0.66, 0.66, 1)';
    //alert ( el.style.webkitTransition );
    el.style.webkitTransform = 'translate3d(0, ' + offsetY + 'px, 0)';
	//alert ( el.style.webkitTransform );
	el.style.webkitTransition = '';
	//alert ( el.style.webkitTransition );
    // Computed the transform in a matrix object given the style.
    ////var transform = new WebKitCSSMatrix(style.webkitTransform);
    //var transform = new WebKitCSSMatrix();
    //alert ( transform );
    // Clear the active transition so it doesn’t apply to our next transform.
    /*el.style.webkitTransition = ‘’;
	el.style.webkitTransform = ‘translate3d(0, ‘ + offsetY + ‘px, 0)’;
	alert ( el.style.webkitTransform );*/
}

function moveMe2 ()
{
	var offsetY = 20;
	document.getElementById ( 'bb' ).style.webkitTransform = 'translate3d(0, ' + offsetY + 'px, 0)';
}

</script>
</head>
<body>

<div id="coucou"><a href="javascript: test()">aaalllooo</a></div>
<div id="zdzd">
	<a href="javascript: goDown ()">goDown</a>
	<a href="javascript: goUp ()">goUp</a>
	<a href="javascript: moveMe ()">move</a>
	<a href="javascript: moveMe2 ()">move2</a>
</div>

<div id="aa" style="width: 400px; height: 400px; background: #FF0000; position: absolute;">
	<div id="bb" style="width: 200px; height: 300px; background: #00FF00; position: absolute;">
	</div>
</div>

</body>
</html>
